import React, { useEffect, useState } from 'react'
import Navbar from '@/comopnents/Navbar'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Tabs, NavBar } from 'antd-mobile'
import OrderCard from '@/comopnents/OrderCard'
import { findAllOrders, orderReturnApplys } from '@/utils/my/order'
import styles from './index.module.less'

interface orderType {
    order: { status: string }
    items: [{}]
}

interface returnApply {
    data: {
        items: [{
            productAttr: string
        }]
    }
}

export default function Order() {

    const navigate = useNavigate()

    // 获取地址栏中传递的参数
    const [searchParams] = useSearchParams()
    let type = searchParams.get('type') as string

    // 选中的 tab 栏
    const [checkTab, setCheckTab] = useState<string>(type)

    // 传入子组件的数据（除售后）
    const [sonOrder, setSonOrder] = useState([] as any)
    // 传入子组件售后的数据
    const [after, setAfter] = useState([] as any)


    // 切换 tabs
    const changeTab = async (val: string) => {
        navigate(`/my/order?type=${val}`, { replace: true })
        setCheckTab(val)
        let res = await findAllOrders()
        // 所有数据
        const all: [{
            order: { status: string }
            items: [{}]
        }] = res.data.orderList
        // 如果点击了售后，获取售后数据
        if (val === '4') {
            // 获取售后数据
            let res = await orderReturnApplys() as returnApply
            res.data.items.forEach(item => item.productAttr = JSON.parse(item.productAttr))
            setSonOrder([])
            setAfter(res.data.items)
            return
        }
        filterData(all, val)
    }

    // 过滤数据
    const filterData = (arr: [{
        order: { status: string }
        items: [{}]
    }], val: string) => {
        setAfter([])
        let aa = [] as Array<object>
        arr.forEach(item => {
            if (val === '3' && item.order.status + '' === '4') {
                aa.push(item)
            }
            if (item.order.status + '' === val) {
                aa.push(item)
            }
        })
        setSonOrder(aa)
    }

    // 返回
    const back = () => {
        navigate('/my', {replace: true})
    }

    useEffect(() => {
        changeTab(type)
    }, [])
    return (
        <div className={styles.orderBox}>
            <div className={styles.tabsBox}>
                {/* <Navbar title='乐居'></Navbar> */}
                <div className={styles.navBar}>
                    <NavBar onBack={back}>乐居</NavBar>
                </div>
                <Tabs className={styles.tabs} defaultActiveKey={type} onChange={changeTab}>
                    <Tabs.Tab title='待付款' key='0'>
                    </Tabs.Tab>
                    <Tabs.Tab title='已付款' key='1'>
                    </Tabs.Tab>
                    <Tabs.Tab title='已发货' key='2'>
                    </Tabs.Tab>
                    <Tabs.Tab title='已收货' key='3'>
                    </Tabs.Tab>
                    <Tabs.Tab title='售后' key='4'>
                    </Tabs.Tab>
                </Tabs>
            </div>
            <OrderCard orderData={sonOrder} afterVal={after} changeFn={(type: string) => changeTab(type)} type={checkTab}></OrderCard>
        </div>
    )
}
